import { ref, createApp } from 'vue';
import MessageModal from '../components/MessageModal.vue';

/**
 * 消息弹窗组合式函数
 * 提供简便的API来显示各种类型的消息弹窗
 */
export function useMessage() {
  /**
   * 显示消息弹窗
   * @param {Object} options - 弹窗配置选项
   * @param {string} options.type - 弹窗类型 (info, success, warning, error, confirm)
   * @param {string} options.title - 弹窗标题
   * @param {string} options.message - 弹窗消息内容
   * @param {string} options.confirmText - 确认按钮文本
   * @param {string} options.cancelText - 取消按钮文本
   * @param {boolean} options.autoClose - 是否自动关闭
   * @param {number} options.autoCloseDelay - 自动关闭延迟时间(毫秒)
   * @returns {Promise} 返回Promise，resolve时表示确认，reject时表示取消
   */
  const showMessage = (options) => {
    return new Promise((resolve, reject) => {
      // 创建容器元素
      const container = document.createElement('div');
      document.body.appendChild(container);
      
      // 创建Vue应用实例
      const app = createApp(MessageModal, {
        visible: true,
        type: options.type || 'info',
        title: options.title || '提示',
        message: options.message || '',
        confirmText: options.confirmText || '确定',
        cancelText: options.cancelText || '取消',
        autoClose: options.autoClose || false,
        autoCloseDelay: options.autoCloseDelay || 3000,
        onConfirm: () => {
          cleanup();
          resolve(true);
        },
        onCancel: () => {
          cleanup();
          reject(false);
        },
        onClose: () => {
          cleanup();
          if (options.type === 'confirm') {
            reject(false);
          } else {
            resolve(true);
          }
        }
      });
      
      // 清理函数
      const cleanup = () => {
        setTimeout(() => {
          app.unmount();
          if (container.parentNode) {
            container.parentNode.removeChild(container);
          }
        }, 300); // 等待动画完成
      };
      
      // 挂载应用
      app.mount(container);
    });
  };
  
  /**
   * 显示信息提示
   * @param {string} message - 消息内容
   * @param {string} title - 标题
   * @param {Object} options - 其他选项
   * @returns {Promise}
   */
  const info = (message, title = '提示', options = {}) => {
    return showMessage({
      type: 'info',
      title,
      message,
      autoClose: true,
      ...options
    });
  };
  
  /**
   * 显示成功提示
   * @param {string} message - 消息内容
   * @param {string} title - 标题
   * @param {Object} options - 其他选项
   * @returns {Promise}
   */
  const success = (message, title = '成功', options = {}) => {
    return showMessage({
      type: 'success',
      title,
      message,
      autoClose: true,
      ...options
    });
  };
  
  /**
   * 显示警告提示
   * @param {string} message - 消息内容
   * @param {string} title - 标题
   * @param {Object} options - 其他选项
   * @returns {Promise}
   */
  const warning = (message, title = '警告', options = {}) => {
    return showMessage({
      type: 'warning',
      title,
      message,
      autoClose: true,
      ...options
    });
  };
  
  /**
   * 显示错误提示
   * @param {string} message - 消息内容
   * @param {string} title - 标题
   * @param {Object} options - 其他选项
   * @returns {Promise}
   */
  const error = (message, title = '错误', options = {}) => {
    return showMessage({
      type: 'error',
      title,
      message,
      autoClose: false, // 错误消息默认不自动关闭
      ...options
    });
  };
  
  /**
   * 显示确认对话框
   * @param {string} message - 消息内容
   * @param {string} title - 标题
   * @param {Object} options - 其他选项
   * @returns {Promise} resolve表示确认，reject表示取消
   */
  const confirm = (message, title = '确认', options = {}) => {
    return showMessage({
      type: 'confirm',
      title,
      message,
      confirmText: '确定',
      cancelText: '取消',
      ...options
    });
  };
  
  return {
    showMessage,
    info,
    success,
    warning,
    error,
    confirm
  };
}

// 创建全局实例
const message = useMessage();

// 导出全局实例和组合式函数
export { message };
export default useMessage;